<template>
    <div>
        <game-header></game-header>
        <el-carousel indicator-position="outside" class="carousel" :autoplay="true" :loop="true" height="400px">
            <el-carousel-item v-for="(item,index) in sliders" :key="index">
                <el-image :src="item"
                          alt="">
                    <div slot="placeholder" class="placeholder">
                        努力加载中<i class="el-icon-loading"></i>
                    </div>
                </el-image>
            </el-carousel-item>
            <el-card class="box-card msg">
                <div slot="header" class="clearfix">
                    <span class="new">最新交易</span>
                </div>
                <div v-for="item in goumai_data" :key="item.Id" class="text item text-ellipsis">
                    ID:{{item.Id}} <span class="text-danger"> {{(item.chengjiao_zongjia / 100).toFixed(2)}} 元</span>购买了
                    <span
                            class="text-info">{{item.shangping_mingcheng}}</span>
                </div>
            </el-card>
        </el-carousel>
        <div class="glist">
            <game-list v-for="(item,index) in shouye_data" :key="index" :data="item"></game-list>
        </div>


    </div>
</template>

<script>
    import {mapMutations} from 'vuex'

    export default {
        name: 'index',
        components: {},
        data() {
            return {
                sliders: [],
                shouye_data: [],
                goumai_data: [],
                tuijian_fenlei: [],
                da_fenlei: [],
            }
        },
        computed: {},
        methods: {
            ...mapMutations(['SET_USER', 'SET_INDEX_TYPE', 'SET_DIALOG', 'SET_QQKF']),
            getIndex() {
                return new Promise(resolve => {
                    this.$axios.get(`/api/user/shouye`)
                        .then(res => {
                            if (res.code === `200`) {
                                let {user, datu_logo, qq_kf, goumai_data, shouye_data, tuijian_fenlei, shanghu_zhuangtai, quanbu_fenlei_data: {da_fenlei_data, xiao_fenlei_data}} = res.data
                                this.sliders = datu_logo;
                                this.shouye_data = shouye_data;
                                this.goumai_data = goumai_data;
                                let store = {
                                    da_fenlei_data,
                                    tuijian_fenlei,
                                    xiao_fenlei_data
                                };

                                this.SET_INDEX_TYPE(store);
                                this.SET_USER(user);
                                this.SET_QQKF(qq_kf)
                                localStorage.user = JSON.stringify(user);
                                localStorage.indexTypes = JSON.stringify(store);
                                localStorage.shanghu_zhuangtai = shanghu_zhuangtai;
                            }
                            resolve()
                        })
                })
            }
        },
        async mounted() {
            await this.getIndex();
        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .carousel {
        position: absolute;
        left: 0;
        width: 100%;

        .el-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /deep/ .el-carousel__indicators--outside button {
            background-color: @primary-color;
        }

        /deep/ .el-carousel__arrow {
            font-size: 22px;
        }

        .msg {
            z-index: 99;
            opacity: .95;
            position: absolute;
            right: 50px;
            top: 0;
            bottom: 0;
            margin: auto;
            padding: 10px;
            border-radius: 2px;
            height: 350px;
            overflow: hidden;
            width: 300px;

            .new {
                border-left: 3px solid @primary-color;
                padding-left: 5px;
                color: #082658;
            }

            .item {
                padding: 5px;
            }

            /deep/ .el-card__body {
                height: 250px;
                overflow: scroll;
            }
        }
    }

    .glist {
        margin: 450px auto 0 auto;
    }


</style>
